<template>
  <div class="hap-studio">
    <monaco-editor @change="editorChange"
    @click-save="onClickSave"
    @click-cmpl="onClickCompile"
    :file="selectedFile" :options="options"
    :value="fileObject.private.content"
    :obj="fileObject"
    :theme="getFileExtension(fileObject.name).theme"
    :language="getFileExtension(fileObject.name).language"
    v-if="selectedFile"></monaco-editor>
    <div class="monaco-editor-box-empty" v-else>
      <div class="content">欢迎使用快应用IDE</div>
    </div>
    <side-panel-container></side-panel-container>
    <toast></toast>
    <file-menu :options="menuState" :menu-list="list" @select-item="onSelectItem"></file-menu>
    <modal :show="showModal" :option="modalOption" @confirm="onConfirm" @cancel="onCancel"></modal>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import QR from 'qrcodejs2'
import sidePanelContainer from './SidePanelContainer'
import monacoEditor from './MonacoEditor'
import fileMenu from './FileMenu'
import toast from './Toast'
import modal from './Modal'
import { themeMap, OPERATION_TYPE } from '../type'
import { guid } from '../util/common-util'

const options = {
  selectOnLineNumbers: true,
  wrappingIndent: 'same'
}

export default {
  data () {
    return {
      options,
      showModal: false,
      promise: null,
      resolve: null,
      reject: null,
      modalOption: {},
      saveTimer: null
    }
  },
  mounted () {
    this.$store.dispatch('toastsAdd', {
      title: 'WELCOME',
      type: 'SUCCESS',
      message: '欢迎使用HAP-STUDIO'
    })
    if (!this.$route.query.key) {
      this.$router.replace({
        query: {
          key: guid()
        }
      })
    }
    this.$store.dispatch('getFilesInfo', {
      params: {
        key: this.$route.query.key
      }
    })
  },
  components: {
    sidePanelContainer,
    monacoEditor,
    toast,
    fileMenu,
    modal
  },
  methods: {
    editorChange (item) {
      this.$store.dispatch('fileContentChange', {...item})
    },
    onClickSave (item) {
      this.$store.dispatch('fileSave', item.file)
      this.$store.dispatch('changeTerminalInfo', {
        type: 'success',
        message: '正在保存...'
      })
      clearTimeout(this.saveTimer)
      this.saveTimer = setTimeout(() => {
        this.$store.dispatch('saveFiles', {
          params: {
            key: this.$route.query.key,
            memFs: this.$store.state.memoryFs
          }
        })
      }, 100)
    },
    onClickCompile () {
      this.$store.dispatch('changeTerminalInfo', {
        type: 'success',
        message: '正在编译...'
      })
      this.$store.dispatch('compileSource', {
        params: {
          key: this.$route.query.key
        }
      }).then(res => {
        let url = ''
        if (process.env.NODE_ENV === 'development') {
          // 配置你自己的IP+PORT
          url = `http://10.232.46.201:12306`
        }
        this.qr = new QR('qr', {
          text: `${url}/api/hapBundle/${this.$route.query.key}`,
          height: 100,
          width: 100
        })
      })
    },
    onSelectItem (item) {
      this.$store.dispatch('changeMenuStatus', {show: false})
      this.showModal = true
      this.modalOption = {
        desc: item.desc,
        input: item.dirtype !== OPERATION_TYPE.DELETE_FILE.dirtype,
        content: item.dirtype === OPERATION_TYPE.RENAME_FILE.dirtype ? item.name : ''
      }
      this.promise = new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      }).then(res => {
        this.$store.dispatch('excuteDirec', {
          ...item,
          name: res || ''
        })
        this.showModal = false
      }, rej => {
        this.showModal = false
      })
    },
    onConfirm (name) {
      this.resolve && this.resolve(name)
    },
    onCancel () {
      this.reject && this.reject()
    },
    getFileExtension (filename) {
      const theme = (/[.]/.exec(filename)) && /[^.]+$/.exec(filename)[0]
      return theme ? (themeMap[theme] || themeMap['ux']) : themeMap['ux']
    }
  },
  computed: {
    ...mapState({
      selectedFile: state => state.selectedFile,
      fileObject: state => state.fileObject,
      menuState: state => state.menuState,
      list: state => state.menuList
    })
  }
}
</script>
<style scoped>
  .monaco-editor-box-empty {
    position: absolute;
    left: 300px;
    right: 0;
    bottom: 0;
    top: 0;
    background: #1E1E1E;
  }
  .monaco-editor-box-empty .content {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    font-size: 40px;
    color: #FFF;
    text-align: center;
  }
</style>
